<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Canvas, Keyboard Events</title>
		
		<script type="text/javascript" src="../Canvas.js"></script>
		
		<script type="text/javascript">
			function init() {				
				Canvas.setEl("canvas", "2d");
				
				var item = new Canvas.Item({
					x: 0,
					y: 0,
					width: 100,
					height: 100,
					draw : function () {
						// Get the context from the canvas
						var ctx = Canvas.getCtx();
						
						// Generate a random color
						var red = Math.floor(Math.random()*255);
						var green = Math.floor(Math.random()*255);
						var blue = Math.floor(Math.random()*255);
						
						// Set the fillStyle of the rectangle
						ctx.fillStyle = "rgb(" +red+","+green+","+blue+")";

						ctx.fillRect(this.x, this.y, this.height, this.width);
					},
					on: {
						"keypress" : function () {
							this.draw();
						}
					}
				});
				item.draw();
			}
		</script>
	</head>
	<body onLoad="init()">
		<canvas id="canvas" width="100" height="100" style="border: 1px solid #000"></canvas>
		<h2>Key Press</h2>
		<p>
			Keyboard events are monitored from the Window, so be careful when using them. Press any key to change the color of the block.
		</p>
	</body>
</html>
